import { DrawerForm, ProFormSelect, ProFormTextArea } from '@ant-design/pro-components';
import { Button, Form } from 'antd';
import { useState } from 'react';
import api from './request';

export type FormConfig = { Component: any; props: Record<string, any> };
export interface Props {
  data?: MerchantAccountMerchantUserWithdrawalApi.ListResponse;
  onSuccess?: () => void;
  onCancel?: () => void;
}
function WithdrawalForm(props: Props) {
  const { data } = props;

  const [form] = Form.useForm();
  const [formData, setFormData] = useState<any>({});

  const onOpenChange = (open: boolean) => {
    if (open) {
      if (data && data.id) {
        form.setFieldsValue(data);
        setFormData(data);
      }
    } else {
      form.resetFields();
      setFormData({});
      props.onCancel?.();
    }
  };
  const onSubmit = async () => {
    const { id: merchantWithdrawalId, auditRemarks, status } = formData;

    const params: MerchantAccountMerchantUserWithdrawalApi.WithdrawalParams = {
      merchantWithdrawalId,
      auditRemarks,
      status,
    };
    const data = await api.updateWithdrawal(params);
    if (data.success) props.onSuccess?.();
    return data.success;
  };

  return (
    <DrawerForm
      autoFocusFirstInput
      title={`提现审核`}
      form={form}
      drawerProps={{ destroyOnClose: true }}
      resize={{
        maxWidth: window.innerWidth * 0.8,
        minWidth: 400,
        onResize() {},
      }}
      trigger={<Button type="link">提现审核</Button>}
      onOpenChange={onOpenChange}
      onFinish={onSubmit}
    >
      <ProFormSelect
        required
        name="shopId"
        label="审核状态"
        placeholder="请选择审核状态"
        options={[
          { label: '待审核', value: 0 },
          { label: '审核通过', value: 1 },
          { label: '审核不通过', value: 2 },
        ]}
        fieldProps={{
          mode: 'multiple',
          value: formData.status,
          onChange: (value) => {
            setFormData({ ...formData, status: value });
          },
        }}
      />
      <ProFormTextArea
        name="remark"
        label="备注"
        placeholder="请输入备注"
        fieldProps={{
          value: formData?.auditRemarks,
          onChange: (e) =>
            setFormData({
              ...formData,
              auditRemarks: e.target.value,
            }),
        }}
      />
    </DrawerForm>
  );
}

export default WithdrawalForm;
